<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>

    <!-- 方法一：为原生默认class添加样式 -->
    <style>
        .router-link-active {
            color: red;
            font-weight: 800;
            font-style: italic;
            font-size: 80px;
        }

        .myActiveClass {
            color: red;
            font-weight: 800;
            font-style: italic;
            font-size: 80px;
            background-color: green;
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(140px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.5s ease;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- router-link默认熏染为一个a标签，使用tag指定其它的 -->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>

        <transition mode="out-in">
            <router-view></router-view>
        </transition>

    </div>
</body>
<script>

    var login = {
        template: '<h1>登录</h1>'
    }

    var register = {
        template: '<h1>注册</h1>'
    }

    var routerObject = new VueRouter({
        // 方法二：使用自定义样式
        linkActiveClass: "myActiveClass",
        routes: [
            // redirect重定向
            {
                path: "/",
                redirect: "/login"
            },
            {
                path: "/login",
                component: login
            },
            {
                path: "/register",
                component: register
            }
        ]
    });

    var vm = new Vue({
        el: "#app",
        methods: {},
        components: {},
        router: routerObject
    });
</script>

</html>